<template>
	<view class="box1">
		<Title :txt="i18n.tgsyjl" :showback="true"></Title>
		<view class="moneysort fac f12">
			<view v-for="(hitem,hindex) in headerTips" :key="hindex" @click="select(hindex)"  :class="[zlIndex ==hindex ? 'active' : 'white', 'item','text-c']">{{hitem.name}}</view>
		</view>
		<view class="px15 white mt10  ">
			<view class="produce px15 py15 bor5 text--center">
				<view v-for="(item,index) in productArr" :key="index">
					<view class="f15 f600">{{item.sumOutput}}</view>
					<view class="f12 white50 mt8">{{i18n.ljcc}}({{item.coin}})</view>
				</view>
			</view>
			<view v-if="list.length==0&&!loadingMore" class="mt80">
				<image src="../../static/nodata.png" class="nodata"></image>
				<view class="text-c notxt mgt12">{{i18n.zwrhsj}}</view>
			</view>
			<view class="f15 total mt15 pb10 border2" v-if="list.length>0">
				{{i18n.symx}}
			</view>
			<navigator class="recordbox" :url="'./revenuedetails?id='+item.id+'&type='+zlIndex" v-for="(item,index) in list" :key="index">
				<view class="item1">
					<view class="fsc">
						<view class="f14">
							{{i18n.yfz}}：{{item.hasStorageCapacity}}T
						</view>
						<view class="f15 f600">
							{{item.sumOutput}} {{item.coin}}
						</view>
					</view>
					<view class="fsc mt5">
						<view class="f12 color-gray">
							{{i18n.ddh}} : {{item.orderId}}
						</view>
						<view class="f12 color-gray">
							{{i18n.wkcc}}
						</view>
					</view>
					<view class="fsc mt3">
						<view class="f12 color-gray">
							{{item.createDate}}
						</view>
						
					</view>
				</view>
			
			</navigator>
		</view>
		
				<view class="cu-load f12 color-info" :class="loadingMore ? 'loading' : 'over'" v-if="list.length>8">{{ loadingMore ? '加载中...' : '没有更多了' }}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			headerTips:[],
			list: [],
			status: 0,
			page: 0,
			zlIndex: 0,
			productArr:[],
		};
	},
	onLoad(op) {
		this.headerTips =JSON.parse(op.list) 
		// this.clearData()
	},
	onShow() {
		this.clearData()
		this.getReleaseLog()
	},
	onReachBottom() {
		this.getReleaseLog()
	},
	computed: {
		i18n() {
			return this.$t('home');
		}
	},
	methods: {
		select(index) {
			this.zlIndex = index;
			// this.getReleaseInfo()
			this.clearData()
			this.getReleaseLog()
		},
		getReleaseLog(){
			let params = {
				page:this.page,
				size:8,
				typeId:this.headerTips[this.zlIndex].id
			}
			this.$http.post("index.getReleaseLog",params).then(res=>{
				this.productArr = res.data.sumCoinIn
				this.finish = res.data.iPages.records.length < 8
				!this.finish && (this.page += 1)
				this.list = [...this.list, ...res.data.iPages.records]
			})
			
		},
		clearData(){
			this.page =0
			this.finish = false
			this.list = []
		}
	}
};
</script>

<style lang="less">
.box1 {
	padding-bottom: 80rpx;
	.moneysort {
		width: 100%;
		padding-top: 40rpx;
	}
	.item {
		font-size: 24rpx;
		padding: 0 20rpx 16rpx 20rpx;
	}
	.active {
		color: #007AFF;
	}
	.produce {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(248deg,#4aacfa 16%, #2474f3 85%);
	}
	.recordbox{
		.item1{
			padding: 20rpx 0 30rpx;
			border-bottom: 2rpx solid #1C2D41;
		}
		
	}
}
</style>
